<template>
  <div class="homeWrap">
    <el-header>
      <span style="color: pink; text-align:left">V2G能源交易系统</span>
      <span style="color: #fff;text-align: right;margin-left: 1080px"><i class="el-icon-s-custom">用户：</i> {{
          username
      }}</span>
      <el-button type="danger" size="mini" plain style="text-align: right;margin-left: 20px">退出登录
      </el-button>
    </el-header>
    <el-container style="height: 100%">
      <el-aside width="270px">
        <user-manage :activeIndex.sync="activeIndex" />
      </el-aside>
      <el-main>
        <node-manage v-if="activeIndex === '2-1'" />
        <buy-energy v-if="activeIndex === '2-2'" />
      </el-main>
    </el-container>
  </div>
</template>
<script>
import NodeManage from "@/views/node-manage/index";
import TaskList from "@/views/task-manage/index";
import UserManage from "./user-manage.vue"
import BuyEnergy from "./buy-energy.vue"
export default {
  components: { BuyEnergy, UserManage, NodeManage, TaskList },
  data() {
    return {
      activeIndex: "1-1",
      username: "FangTiewei",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeIndex = key;
    },
  },
};
</script>
<style>
.el-header {
  background-color: #60905f;
  color: #333;
  /* text-align: right; */
  line-height: 60px;
}

.el-footer {
  background-color: #545c64;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

.el-aside {
  background-color: #545c64;
}

.homeWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
